<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>房产审核详情</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-form
      label-width="100px"
      :model="query"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <!-- card 1 -->
      <el-card>
        <div class="title-box">基本信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所属园区" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="楼号">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单元号" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 2 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房号" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋面积" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋类型" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 3 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="朝向" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="层高" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房产格局" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 4 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="地址" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="详细地址" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="房产证" prop="is_enterprise">
          <el-image style="width: 200px" :src="url" :preview-src-list="srcList">
          </el-image>
        </el-form-item>
      </el-card>
      <!-- card 2 -->
      <el-card style="margin: 20px 0">
        <div class="title-box">房东信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房东姓名" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房东手机号">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房东身份证国徽面" prop="is_enterprise">
              <el-image
                style="width: 200px"
                :src="url"
                :preview-src-list="srcList"
              >
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房东身份证人像面" prop="is_enterprise">
              <el-image
                style="width: 200px"
                :src="url"
                :preview-src-list="srcList"
              >
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin: 20px 0">
        <div class="title-box">关联经济人</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="经纪人UID" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经纪人姓名" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经纪人手机号" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.Name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex-center">
          <el-button type="primary" plain>驳回</el-button>
          <el-button type="primary">通过</el-button>
        </div>
      </el-card>
    </el-form>
  </d2-container>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      query: {},
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        time: [{ required: true, message: "日期不能为空", trigger: "blur" }],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
      },
      searchForm: {
        user_name: "",
      },
      tableData: {
        list: [],
        count: 0,
      },
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    search() {
      let params = {
        page: this.page,
        page_size: this.pageSize,
        ...this.searchForm,
      };

      this.$axios.post("/admin/getNoteList", params).then((result) => {
        if (result) {
          this.tableData = result;
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
    reset() {
      this.searchForm = {};
      this.search();
    },
    deleteInfo(id) {
      const _this = this;
      this.$confirm("确定删除该条数据？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnPressEscape: false,
        closeOnClickModal: false,
      }).then(() => {
        let params = {
          _id: id,
        };
        _this.$axios.post("/admin/deleteNote", params).then((res) => {
          if (res) {
            _this.$message({
              message: res.data.msg,
              type: "error",
            });
          } else {
            _this.$message({
              message: "删除成功",
              type: "success",
            });
            _this.search();
          }
        });
      });
    },
  },
  created() {
    // this.search();
  },
};
</script>

<style scoped lang="scss">
</style>
